<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习vue路由</title>
    <script src="../vue/vue.js"></script>
    <script src="../vue/vue-router.js"></script>
</head>

<body>
    <!-- 需求:点击不同的元素,展示不同的网址 -->
    <div id="app">
        <router-link to="/runoob">runoob</router-link>
        <router-link to="/w3c">w3c</router-link>
        <router-view></router-view>
    </div>
    <script>
        new Vue({
            el: "#app",
            router : new VueRouter({
            routes: [ //把不同的请求,分发给不同的组件处理
                { //点击runoob时,匹配到对应的组件,展示runoob的网址
                    path: '/runoob',
                    component: {
                        template: '<h1><a href="https://www.runoob.com" target=_blank>点击此处跳转到菜鸟网站</a></h1>',
                    },
                },
                { //点击w3c时,匹配到对应的组件,展示w3c的网址
                    path: '/w3c',
                    component: {
                        template: '<h1><a href="https://www.w3school.com.cn" target=_blank>点击此处跳转到w3c网站</a></h1>',
                    },
                }
            ]
        })
        })
    </script>
</body>

</html>